<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>收藏-粤亮旅游网</title>
    <!-- 公共css -->
    <link rel="stylesheet" href="../css/common.css">
    <link rel="stylesheet" href="../css/collect.css">
    <script src="../js/jquery-3.3.1.js"></script>
</head>

<body>
<!-- 快捷导航栏开始 -->
<section class="shortcut">
    <div class="top-bgc">
        欢迎来到粤亮旅游网!
    </div>
    <div class="w">
        <div class="mine">
            <ul>
                <li class="fl">
                    <a href="orders.html">我的订单</a>
                    &nbsp;&nbsp;&nbsp;
                    <a href="#" class="logout">退出</a>
                </li>

            </ul>
        </div>
    </div>
</section>
<div class="box w">
    <div class="tit">我的收藏</div>
    <div class="collections">

    </div>
</div>

<script>
    // 获取图片链接
    function getImage(image) {
        return `/common/download?name=${image}`;
    }

    const logout = document.querySelector('.logout')
    logout.addEventListener('click', function () {
        $.ajax({
            url: "/logout",
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    alert("退出成功");
                    localStorage.removeItem('responseData')
                    localStorage.removeItem('hotelDetail')
                    localStorage.removeItem('cityData')
                    // 进行跳转或其他操作
                    window.location.href = 'index.html'
                } else {
                    alert("退出失败，请检查用户名和密码");
                }
            },
            error: function () {
                alert("请求失败");
            }
        });
    })

    window.addEventListener('DOMContentLoaded', function () {
        const collections = document.querySelector('.box .collections')

        // 发送 Ajax 请求
        $.ajax({
            url: `/view/collections`,
            type: "POST",
            contentType: "application/json",
            success: function (response) {
                // 处理响应
                if (response.success === 1) {
                    let html = '';
                    response.data.forEach(function (view) {
                        const image = getImage(view.viewImage);
                        html += `
      <div class="collection">
        <img src="${image}" alt="" class="sight-pic">
        <div class="sight-name">${view.viewName}</div>
        <a href="sight.html?viewId=${view.viewId}" class="findout-more">查看详情</a>
      </div>
                `
                    });
                    collections.innerHTML = html;
                } else {
                    alert("查询失败");
                }
            },
            error: function () {
                alert("请求失败");
            }
        })
    })
</script>
</body>

</html>